<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/system/log/list.js"></script>

<!--
需要放开 common.jspf 的js
时间控件 -------- 可能导致样式问题,和某些js事件失效 如加上,,自行处理
<div class="container">
<div class="span12">

<h1>Usage Examples</h1>

<hr />

<h4>Basic Date Range Picker</h4>
<div class="well">

<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div class="controls">
<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2014-5-21 - 2014-6-21" />
</div>
</div>
</div>
</fieldset>
</form>

<script type="text/javascript">
$(document).ready(function() {
$('#reservation').daterangepicker(null, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
});
</script>

</div>


<h4>Basic Single Date Picker</h4>
<div class="well">

<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div class="controls">
<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" readonly style="width: 200px" name="birthday" id="birthday" class="form-control" value="03/18/2013" />
</div>
</div>
</div>
</fieldset>
</form>

<script type="text/javascript">
$(document).ready(function() {
$('#birthday').daterangepicker({ singleDatePicker: true }, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
});
</script>

</div>

<h4>Date Range &amp; Time Picker with 30 Minute Increments</h4>
<div class="well">

<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="reservationtime">Choose your check-in and check-out times:</label>
<div class="controls">
<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<input type="text" style="width: 400px" name="reservation" id="reservationtime" class="form-control" value="08/01/2013 1:00 PM - 08/01/2013 1:30 PM" class="span4"/>
</div>
</div>
</div>
</fieldset>
</form>

<script type="text/javascript">
$(document).ready(function() {
$('#reservationtime').daterangepicker({
timePicker: true,
timePickerIncrement: 30,
format: 'MM/DD/YYYY h:mm A'
}, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
});
</script>

</div>

<h4>Options Usage</h4>

<div class="well" style="overflow: auto">

<button id="options1" class="btn btn-primary">Apply Option Set 1</button>

<button id="options2" class="btn btn-primary">Apply Option Set 2</button>

<button id="destroy" class="btn btn-primary">Remove DateRangePicker</button>

<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>

<script type="text/javascript">
$(document).ready(function() {

var cb = function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
//alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
}

var optionSet1 = {
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2014',
dateLimit: { days: 60 },
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
opens: 'left',
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary',
cancelClass: 'btn-small',
format: 'MM/DD/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Submit',
cancelLabel: 'Clear',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
};

var optionSet2 = {
startDate: moment().subtract('days', 7),
endDate: moment(),
opens: 'left',
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
}
};

$('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

$('#reportrange').daterangepicker(optionSet1, cb);

$('#reportrange').on('show.daterangepicker', function() { console.log("show event fired"); });
$('#reportrange').on('hide.daterangepicker', function() { console.log("hide event fired"); });
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
console.log("apply event fired, start/end dates are "
+ picker.startDate.format('MMMM D, YYYY')
+ " to "
+ picker.endDate.format('MMMM D, YYYY')
);
});
$('#reportrange').on('cancel.daterangepicker', function(ev, picker) { console.log("cancel event fired"); });

$('#options1').click(function() {
$('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
});

$('#options2').click(function() {
$('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
});

$('#destroy').click(function() {
$('#reportrange').data('daterangepicker').remove();
});

});
</script>

</div>


<h4>Plays nicely with Bootstrap dropdowns</h4>

<div class="well">

<div class="dropdown" style="display: inline-block;">
<a data-toggle="dropdown" class="btn btn-primary" href="#">Regular dropdown</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">item</a></li>
</ul>
</div>

<div id="reportrange2" class="btn" style="display: inline-block; background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>

<script type="text/javascript">
$(document).ready(function() {
$('#reportrange2 span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
$('#reportrange2').daterangepicker();
});
</script>

</div>


</div>
</div> -->
<div class="m-b-md">
    <form class="form-inline" role="form" id="searchForm"
          name="searchForm">
        <div class="form-group">
            <label class="control-label"> <span
                    class="h4 font-thin v-middle">账号:</span></label> <input
                class="input-medium ui-autocomplete-input" id="accountName"
                name="logFormMap.accountName">
        </div>
        <a href="javascript:void(0)" class="btn btn-default" id="search">查询</a>
    </form>
</div>
<div class="table-responsive">
    <div id="paging" class="pagclass"></div>
</div>
